<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>信息</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		html body {
			background: rgba(240, 241, 242, 1);
		}

		.aui-tab {
			box-shadow: 0 8 8px #E6E6E6;
		}

		.aui-tab-item {
			height: 2.5rem;
			line-height: 2.5rem;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
		}

		.message {
			width: 100%;
			padding: 0 0.75rem;
			display: flex;
			margin-top: 0.75rem;
			flex-direction: column;
			background: rgba(240, 241, 242, 1);
			box-sizing: border-box;
		}

		.message .aui-text-left {
			font-weight: bolder;
			float: left;
			line-height: 0.75rem;
			color: #666666;
		}

		.message .aui-font-size-14 {
			color: #666666;
			padding-top: 0.5rem;
		}

		.nomessage {
			text-align: center;
			margin-top: 3.5rem;
		}

		.nomessage img {
			width: 100%;
			margin-bottom: 1.2rem;
		}

		.aui-linear>span {
			display: inline-block;
			height: 100%;
			position: relative;
			background: linear-gradient(-152deg, #ee02fd, #9972e6);
			background: -webkit-linear-gradient(-152deg, #ee02fd, #9972e6);
			color: #72D5EF;
			-webkit-background-clip: text;
			-webkit-text-fill-color: #72D5EF;
			border-bottom: .1rem solid #72D5EF;
			padding: 0 .8rem;
		}

		/*改写*/

		.news_wraper {
			text-align: center;
			height: 2.2rem;
			line-height: 2.2rem;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			background-color: #fff;
		}

		.system_news {
			margin-right: 4.1rem;
			height: 2.2rem;
			line-height: 2.2rem;
		}

		.tui_news {
			height: 2.2rem;
			line-height: 2.2rem;
		}

		.aui-linear_new {
			font-family: PingFangSC;
			font-weight: 500;
			color: rgba(114, 213, 239, 1);
			border-bottom: 0.1rem solid rgba(114, 213, 239, 1);
			border-radius: 0.05rem;
		}

		.news_wraper_cont {
			padding: 1rem 0.75rem 0.8rem 0.75rem;
			border: 1px solid red;
		}

		.info_time {
			width: 100%;
			height: 0.6rem;
			margin-bottom: 0.8rem;
			font-size: .6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.info_none {
			display: inline-block;
			width: .6rem;
			height: .6rem;
			border-radius: 50%;
			background-color: #E82929;
			transform: translateY(.04rem);
		}

		.info_title {
			font-size: 0.8rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(46, 46, 46, 1);
		}

		.order_logistics1 {
			font-size: .65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
			height: auto;
		}



		.order_logistics2 {
			font-size: .65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
			margin-top: .7rem;
			padding-bottom: .75rem;
			overflow: scroll;
		}

		.content {
			height: 2rem;
			overflow: hidden;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			box-orient: vertical;
			display: -webkit-box;
			display: box;
			margin-top:-0.5rem;

		}
		.good_title{
			margin-bottom:0.9rem;
			width: 5.5rem;
			overflow: hidden;
			white-space: nowrap;
			text-overflow:ellipsis;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<!-- 消息栏：系统消息/推送消息 -->


		<div class="aui-content">
			<div v-for="(vo,index) in info" @touchstart="gtouchstart(vo.id,index)" ontouchmove="gtouchmove()"
				ontouchend="gtouchend()" class="message" @click="next(vo.id,vo.type,vo.source_id,index);">
				<!-- 时间 -->
				<div class="aui-text-center info_time">
					{{vo.add_time}}
				</div>
				<div style="">
					<div class=""
						style="padding:0.75rem 0.5rem 0.5rem;background:rgba(255,255,255,1);border-radius:0.4rem;height: auto;margin: 0 auto;">
						<div class="" tapmode style="width:100%;height:0.8rem;margin-bottom:0.7rem;">
							<!-- 标题 -->
							<div class="aui-text-left" style="">
								<span class="info_title">{{vo.title}}</span>
							</div>
							<div class="aui-text-right">
								<span v-if="vo.is_read=='0'" class="info_none"
									style="float:right;width:0.55rem;height:0.55rem;">&nbsp</span>
							</div>
						</div>
						<!-- 1、当推送的通知为订单或者物流时 -->
						<div class="order_logistics1" v-if="vo.type=='物流'||vo.type=='订单' || vo.type=='售后'" style="">
							<div style="width:94.2%;height:2.5rem;margin:auto;margin-bottom:0.75rem;">
								<!-- 商品预览图 -->
								<img :src="vo.cover"
									style="margin-right:0.5rem !important;float:left;width:2.5rem;height:2.5rem;border-radius:0.2rem">
								<!-- 单号信息 -->
								<div class="" style="width:13.25rem;height:2.5rem;">
									<div class="good_title">{{vo.good_title}} </div>
									<div class="content" style="overflow:scroll;">{{vo.content}}</div>
								</div>
							</div>
							<div style="width:100%;height:2rem;line-height:2rem;text-align:right;font-size:0.7rem;font-weight:400;color:rgba(46,46,46,1);border-top: 1px solid rgba(238, 238, 238, 0.5);"
								v-show="vo.ship_num">订单号：{{vo.order_num}}</div><!-- ----->
						</div>


						<!-- 2、当推送的通知为非订单或者非物流时 -->
						<div class="order_logistics2" v-if="vo.type!=='物流'&&vo.type!=='订单'&&vo.type!=='售后'">
							<div class="aui-text-left"
								style="width:100%;height:auto;font-size:0.7rem;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(128,128,128,1);">
								{{vo.content}}
							</div>
						</div>


					</div>
				</div>
			</div>
		</div>
		<div v-if="info.length<1" class="nomessage">
			<img src="../../image/bg/bg-nomessage.png" style="width:7.55rem;margin-left:50%;transform:translateX(-50%);margin-bottom:1.35rem" />
			<div class="aui-font-size-16 ming-text-hui6" style="color:#B3B3B3 !important">
				暂无消息
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			index: '系统消息',
			info: [],
			unread_sys_num: 0,
			unread_push_num: 0,
			page: 1,
			loadmore: true
		},
		methods: {
			get_list: function () {
				get_data('api/Information/msgList', {
					token: $api.getStorage('token'),
					sign: vm.index,
					page: vm.page
				}, function (ret) {
					// alert(JSON.stringify(ret))
					if (ret.status == 1) {
						vm.unread_sys_num = ret.data.unread_sys_num
						vm.unread_push_num = ret.data.unread_push_num
						send_event('my_message', {
							unread_sys_num: vm.unread_sys_num,
							unread_push_num: vm.unread_push_num,
						})
						if (vm.page == 1) {
							if (ret.data.list.length <= 0) {
								vm.info = [];
								return;
							}
						}
						ret.data.list.forEach(function (el) {
							vm.info.push(el)
						})
					}
				})
			}
		}
	})
	apiready = function () {
		$api.setStorage('type', 1)
		vm.get_list()
		fnInitPullRefresh(function(ret) {
				vm.page = 1
				vm.info = []
				vm.loadmore = true
				vm.get_list()
			})
		// 新版刷新
		refresh_new(function () {
			setTimeout(function () {
				vm.page = 1
				vm.info = []
				vm.loadmore = true
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
		fnInitScrollToBottom(function (ret) {
			if (vm.loadmore) {
				vm.page++;
				vm.get_list()
			}
		})


		add_event('message_list', function (ret) {
			vm.page = 1
			vm.info = []
			vm.loadmore = true
			vm.index = ret.index
			vm.get_list()
		})

	};

	function next(id, type, source_id, index) {
		//alert(source_id)
		vm.info[index]['is_read'] = 1;
		if (type == '优惠券') {
			read_msg(id)
			open_win('coupon', 'coupon.html', false)
			return;
		}
		if (type == '物流') {
			read_msg(id)
			openWin_logistics_detail(source_id)
			return;
		}
		if (type == '售后') {
			read_msg(id)
			openWin_aftersale_detail(source_id)
			return;
		}
		if (type == '商品') {
			read_msg(id)

			openWin_goods_detail(source_id)
			return;
		}

		if (type == '资讯' || type == '会员圈') {
			read_msg(id)
			openWin_circle_details(source_id)
			return;
		}
		if (type == '订单') {
			read_msg(id)
			openWin_order_detail(source_id)
			return;
		}

		if (type == '拼团') {
			read_msg(id)
			open_win('group_goods_list', 'widget://html/goods/group_goods_list.html', false)
			return;
		}
		if (type == '秒杀') {
			read_msg(id)
			open_win('miaosha_goods_list', 'widget://html/goods/miaosha_goods_list.html', false)
			return;
		}

		openWin_message_details(id)
	}

	function tapindex(index, type) {
		if (vm.index != index) {
			vm.index = index
			vm.page = 1
			vm.info = []
			vm.loadmore = true
			vm.get_list()
		}
		$api.rmStorage('type');
		$api.setStorage('type', $type);
	}
	var timeOutEvent = 0;

	function gtouchstart(id, index) {
		// timeOutEvent = setTimeout(function() {
		// 	longPress(id, index)
		// }, 10000);
		api.addEventListener({
			name: 'longpress'
		}, function (ret, err) {
			longPress(id, index);
			// if( ret ){
			//      alert( JSON.stringify( ret ) );
			// 		 longPress(id, index)
			// }else{
			//      alert( JSON.stringify( err ) );
			// }
		});

		return false;
	};

	function gtouchend() {
		clearTimeout(timeOutEvent);
		if (timeOutEvent != 0) {
			//这里写要执行的内容（尤如onclick事件）
			//				console.log("你这是点击，不是长按");
		}
		return false;
	};

	function gtouchmove() {
		clearTimeout(timeOutEvent);
		timeOutEvent = 0;
		console.log("你移动了啊");
	};

	function longPress(id, index) {
		timeOutEvent = 0;
		//执行长按要执行的内容，如弹出菜单
		del_msg(id, index)
	}


	function del_msg(id, index) {
		var dialogBox = api.require('dialogBox');
		dialogBox.alert({
			texts: {
				title: '提示',
				content: '确定要删除该消息吗？',
				leftBtnTitle: '取消',
				rightBtnTitle: '确定'
			},
			styles: {
				bg: '#fff',
				w: 295,
				corner: 10,
				title: {
					marginT: 20,
					titleSize: 17,
					titleColor: '#444444'
				},
				content: {
					marginT: 18,
					marginB: 30,
					color: '#444444',
					size: 17
				},
				left: {
					marginB: 0,
					marginL: 0,
					w: 147.5,
					h: 55,
					corner: 10,
					// bg: 'widget://image/ico/ico_btn_left_bg.png',
					bg: "#fff",
					color: '#999999',
					size: 16
				},
				right: {
					marginB: 0,
					marginL: 0,
					w: 147.5,
					h: 55,
					corner: 10,
					bg: '#fff',
					color: '#005A93',
					size: 16
				},
				horizontalLine: {
					color: '#EEEEEE',
					height: 1
				},
				verticalLine: {
					color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
					width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
				}
			}
		}, function (ret) {
			if (ret.eventType == 'left') {
				var dialogBox = api.require('dialogBox');
				dialogBox.close({
					dialogName: 'alert'
				});
			} else if (ret.eventType == 'right') {
				get_data('api/Information/del', {
					token: $api.getStorage('token'),
					id: id
				}, function (ret) {
					if (ret.status) {
						toast('删除成功')
						vm.info.splice(index, 1);
						send_event('read_msg')
					}
				})
				var dialogBox = api.require('dialogBox');
				dialogBox.close({
					dialogName: 'alert'
				});
			}
		});
	}

	function read_msg(id) {
		get_data('api/Information/read', {
			token: $api.getStorage('token'),
			id: id
		}, function (ret) {
			if (ret.status) {
				if (ret.data.unread_msg_num==0) {
					send_event('read_msg_all')
				}
				send_event('read_msg')
			}
		})
	}
</script>

</html>
